<template>
  <div class="tpl39-head">
    <section
      class="modulePadding mob48"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
      <section
        class="members_flash j-swipe"
        :class="[!tplItemData.datasetNav || tplItemData.datasetNav.length==0?'padding':'']"
        v-if="tplItemData.showType == 1"
        :style="`margin:${ tplItemData.space && tplItemData.space == 1 ? '10px auto' : '0 auto' }`">
        <ul class="clearfix">
          <!-- TODO 小程序端用swiper -->
          <wx-swiper class="my-swipe" :style="`height: ${imgadvWxH}`" :circular="true" indicator-color="#ebedf0" indicator-active-color="#FE5000" :autoplay="autoplay" :indicator-dots="showIndicators">
            <wx-swiper-item v-for="(item,index) in tplItemData.dataset" :key="index">
              <a @click="openLink(item.link)">
                <img :src="item.pic" alt="" @load="onImageLoad($event)" />
              </a>
            </wx-swiper-item>
          </wx-swiper>
  
        </ul>
      </section>
 
      <section
        v-else
        class="members_flash members_imgad"
        :class="[!tplItemData.datasetNav || tplItemData.datasetNav.length==0?'padding':'']"

        :style="`margin:${ tplItemData.space && tplItemData.space == 1 ? '10px auto' : '0 auto' }`">
        <ul class="clearfix">
          <li
            v-for="(item, index) in tplItemData.dataset" :key="index"
            :style="`margin-bottom:${ tplItemData.margin ? tplItemData.margin : '0' }px`">
            <a @click="openLink(item.link)" :title="item.showtitle">
              <img :src="item.pic" />
            </a>
          </li>
          </ul>
      </section>
    </section>

    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  // import { Swipe, SwipeItem } from 'vant'
  
  // Vue.use(Swipe)
  // Vue.use(SwipeItem)
  export default Vue.extend({
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        showIndicators: true,
        autoplay: true,
        imgadvWxH: 0,
        keyword: '',
        cur: 0
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
        openPage(link)
      },
      // TODO 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight=event.detail.height
        if(imgHeight>parseFloat(this.imgadvWxH)){
          this.imgadvWxH=imgHeight+'px'
        }
      }
    },
    mounted() {
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .tpl39-head{  
    .members_flash{
      .members_flash_time{
        margin-bottom: 10px;
        span.cur{
          background:#fff;
          display: inline-block;
          padding:0 8px;
          border-radius:12px;
        }
        span{
          background: #fff;
        }
      }
      .img{
        width: 100% !important;
      }
    }
  }
</style>
